<template>
	<view class="mine">
		<!-- 用户信息 -->
		<view class="userInfo">
			<image :src="(isLogin && userInfo.icon) || '../../static/icons/leju-logo.png'" mode="" class="avatar" @tap="handleAvatarClick"></image>
			<view class="info" v-if="isLogin">
				<view class="nickName">{{ userInfo.nickname }}</view>
				<view class="userName">用户名: {{ userInfo.username }}</view>
			</view>
			<view class="nologin" v-else>
				<view>Hi ~</view>
				<view>您还没登录呢</view>
			</view>
		</view>
		<!-- 登录注册 -->
		<view class="btns" v-if="!isLogin">
			<navigator class="registBtn btn" url="/pages/register/register">注册</navigator>
			<navigator class="loginBtn btn" url="/pages/login/login">登录</navigator>
		</view>
		<!-- 我的订单 -->
		<view class="my-orders">
			<view class="title">我的订单</view>
			<view class="navs">
				<navigator class="nav-item" v-for="(item, index) in navs" :key="index" :url="`/pages/order/order?type=${item.type}`">
					<image :src="item.icon" mode=""></image>
					<view>{{ item.name }}</view>
				</navigator>
			</view>
		</view>

		<!-- 列表 -->
		<view class="grid">
			<view class="grid-item" v-for="(item, index) in grids" :key="index" @tap="handleIconClick(item)">
				<image :src="item.icon" mode=""></image>
				<view class="name">{{ item.name }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import mixin from '../../mixins/mixin.js';
export default {
	mixins: [mixin],
	data() {
		return {
			isLogin: true,
			userInfo: {},
			navs: [
				{
					name: '待付款',
					icon: '../../static/icons/icon-pay.png',
					type: 0
				},
				{
					name: '已付款',
					icon: '../../static/icons/pay-done.png',
					type: 1
				},
				{
					name: '已发货',
					icon: '../../static/icons/icon-car.png',
					type: 2
				},
				{
					name: '已收货',
					icon: '../../static/icons/icon-done.png',
					type: 3
				},
				{
					name: '售后',
					icon: '../../static/icons/icon-back.png',
					type: 4
				}
			],
			grids: [
				{
					name: '商品收藏',
					icon: '../../static/icons/save.png',
					path: '/pages/mine/collectProducts/collectProducts'
				},
				{
					name: '品牌',
					icon: '../../static/icons/brand.png',
					path: ''
				},
				{
					name: '文章收藏',
					icon: '../../static/icons/article.png',
					path: '/pages/mine/collectArticle/collectArticle'
				},
				{
					name: '地址',
					icon: '../../static/icons/address.png',
					path: '/pages/mine/addressManage/addressManage'
				},
				{
					name: '卡包',
					icon: '../../static/icons/card.png',
					path: ''
				},
				{
					name: '购物车',
					icon: '../../static/icons/cart2.png',
					path: '/pages/cart/cart'
				},
				{
					name: '联系客服',
					icon: '../../static/icons/tel.png',
					type: 'call',
					path: ''
				}
			]
		};
	},
	methods: {
		// 点击头像
		handleAvatarClick() {
			if (!this.isLogin) return;
			uni.navigateTo({
				url: 'userDetail/userDetail'
			});
		},
		// 点击icon
		handleIconClick(item) {
			if (!item.path) {
				// 联系客服
				if (item.type == 'call') {
					uni.makePhoneCall({
						phoneNumber: '18911614700'
					});
					return;
				}
				uni.showToast({
					title: '功能暂不开放',
					icon: 'error'
				});
				return;
			}
			uni.navigateTo({
				url: item.path
			});
		}
	},
	onShow() {
		if (this.checkLogin()) {
			this.userInfo = uni.getStorageSync('userinfo');
			this.isLogin = true;
		} else {
			this.isLogin = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.mine {
	padding: 0 40rpx;
	// 用户信息
	.userInfo {
		display: flex;
		padding-top: 30rpx;
		.avatar {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
		}
		.info {
			margin-left: 32rpx;
			padding: 12rpx 0;
			.nickName {
				font-size: 40rpx;
				font-weight: 600;
				padding-top: 14rpx;
			}
			.userName {
				color: #999;
				font-size: 26rpx;
				padding: 14rpx 0;
			}
		}
		.nologin {
			margin-left: 32rpx;
			padding: 12rpx 0;
			color: #3d4c46;
			font-size: 14px;

			view:first-child {
				padding-top: 14rpx;
			}
			view:last-child {
				padding-top: 14rpx;
			}
		}
	}
	// 登录注册按钮
	.btns {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 40rpx 0;
		.btn {
			width: 182rpx;
			height: 76rpx;
			text-align: center;
			line-height: 76rpx;
			border: 1px solid #354e44;
			border-radius: 10rpx;
			margin: 0 30rpx;
		}
		.loginBtn {
			background: #354e44;
			color: #fff;
		}
	}

	// 我的订单
	.my-orders {
		height: 208rpx;
		border-radius: 4rpx;
		background-color: #fff;
		margin-top: 60rpx;
		.title {
			height: 76rpx;
			line-height: 76rpx;
			font-size: 26rpx;
			border-bottom: 2rpx solid #ddd;
			margin: 0 54rpx;
		}
		.navs {
			display: flex;
			justify-content: space-between;
			padding: 0 54rpx;
			image {
				width: 40rpx;
				height: 40rpx;
				margin: 20rpx 0 10rpx;
			}
			.nav-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
			}
		}
	}
	// 列表
	.grid {
		display: flex;
		justify-content: first baseline;
		align-items: center;
		flex-wrap: wrap;
		margin: 60rpx 0 30rpx;
		padding: 30rpx 0 60rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.grid-item {
			width: 33.33%;
			height: 200rpx;
			text-align: center;
			padding: 20rpx 0;
			box-sizing: border-box;
			image {
				width: 50rpx;
				height: 50rpx;
			}
			.name {
				font-size: 26rpx;
				margin-top: 20rpx;
			}
		}
	}
}
</style>
